<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--1、头部 不使用fragment-->
<head>
    <!-- 字符集设置 -->
    <meta charset="UTF-8">
    <!--移动端的：缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>博客详情</title>
    <!-- x-icon设置 -->
    <link href="java.ico" rel="shortcut icon" type="image/x-icon" th:href="@{/images/favicon.png}"/>
    <!-- semantic ui css引用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
          th:href="@{/css/semantic.css}">
    <!-- 自设样式css引用 -->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <!-- typo 标签样式css引用 -->
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <!-- animate 动画样式css引用 -->
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
</head>

<!-- 2、中间内容、底部footer -->
<body class="bg-search">

<!-- 2.1：导航栏 -->
<nav th:replace="~{fragment/frontend_fragment::nav(-1)}"></nav>

<br>
<br>
<br>
<br>

<!-- 2.2：中间内容 -->
<div class="m-opacity m-container-middle m-padded-tb-big m-phone-opacity">
    <div class="ui container">  <!--拥有：响应式的效果-->
        <!--推荐：篇目数-->
        <div class="ui segment center aligned m-padded-tb-small m-search-title-bar-background">
            <span class="m-font-Chinese">搜索结果：</span>
            <span class="m-font-number" th:text="${pageInfo.getTotal()}">16篇</span> <span
                class="m-font-Chinese">篇</span>
        </div>

        <!--当前分类：所有文章-->
        <div class="ui segment radius-all" th:each="blog : ${pageInfo.getList()}">
            <div class="ui padded-lr vertical m-padded-tb-small  m-mobile-clear segment">
                <div class="ui middle aligned mobile reversed stackable grid">
                    <div class="eleven wide column m-padded-tb-small">
                        <div class="title-header m-margin-bottom-middle">
                            <a class="m-black" target="_blank" th:href="@{/frontend/blog/{id}(id=${blog.id})}"
                               th:text="${blog.title}"></a>
                        </div>
                        <p class="m-text m-margin-top-larger-px" th:text="|${blog.description}...|">
                            随着岁月的境迁, 同学们的差距会越来越来大？这是什么原因呢？ 很大程度上，读书阶段就已经造就了这种局面。
                            我想这便是自我约束力的丧失。导致生活任意妄为， 浑浑噩噩，每天混迹于
                        </p>

                        <div class="ui m-margin-top-larger-px grid">
                            <div class="twelve wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="/images/avatar.jpg" th:src="@{${blog.user.avatar}}" alt=""
                                             class="ui avatar image">
                                        <div class="content"><a th:href="@{/frontend/about}" target="_blank"
                                                                class="header"
                                                                th:text="${blog.user.nickname}">haha</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i><span
                                            th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}">2021-03-02</span>
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i> <span th:text="${blog.views}">477</span>
                                    </div>
                                    <div class="item">
                                        <i class="comment outline icon"></i><span
                                            th:text="${blog.commentNum}">5</span>
                                    </div>
                                </div>
                            </div>


                            <div class="right aligned four wide column">
                                <a target="_blank"
                                   class="ui teal basic label m-padded-tiny m-text-thin font-spacing"
                                   th:text="${blog.type.name}">框架底层原理</a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" th:href="@{/frontend/blog/{id}(id=${blog.id})}" target="_blank">
                            <img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <!--换页-->
        <div class="ui pagination menu" style="width: 100%"
             th:unless="${null == pageInfo.getList() || pageInfo.getList().size() == 0}">
            <!--上一页-->
            <a class="item left aligned"
               th:href="@{/frontend/search(query=${currentQuery},pagenum=${pageInfo.getPageNum()-1}, pagesize=${pageInfo.pageSize})}"
               th:styleappend="${pageInfo.isIsFirstPage()} ? 'cursor: not-allowed'"
               th:onclick="${pageInfo.isIsFirstPage()} ? 'return false'">
                <i class="left arrow icon"></i> Previous
            </a>

            <!--页码索引-->
            <div class="item " th:classappend="${pageInfo.getPageNum()} == ${pageNum} ? 'active'"
                 th:each="pageNum:${pageInfo.navigatepageNums}" style="padding: 2px 7px 2px 7px">
                <a th:onclick="${pageInfo.getPages() <= 1} ? 'return false'"
                   style="line-height: 24px; margin: 0; background: #87ceeb" class="ui circular label  pageBtn"
                   th:href="@{/frontend/search(query=${currentQuery},pagenum=${pageNum}, pagesize=${pageInfo.pageSize})}"
                   th:text="${pageNum}" th:classappend="${pageInfo.getPageNum()} == ${pageNum} ? 'myRed'">2</a>
            </div>

            <!--下一页-->
            <a class="item right aligned"
               th:href="@{/frontend/search(query=${currentQuery},pagenum=${pageInfo.getPageNum()+1}, pagesize=${pageInfo.pageSize})}"
               th:styleappend="${pageInfo.isIsLastPage()} ? 'cursor: not-allowed'"
               th:onclick="${pageInfo.isIsLastPage()} ? 'return false'">
                Next <i class="icon right arrow"></i>
            </a>
        </div>
    </div>
</div>


<!-- 2.3：底部footer -->
<footer th:replace="fragment/frontend_fragment::footer"></footer>

<!--3、js引用 不使用fragment -->
<div>
    <!-- jquery js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"
            th:src="@{/js/admin/jquery.min.js}"></script>
    <!-- semantic ui js引用 -->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
            th:src="@{/js/semantic.js}"></script>
</div>

<!-- 4、页面专用js -->
<script>

    // 移动端 导航栏点击显示
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-show');
    });
</script>

</body>


</html>